<template>
	<view class="box">
		<view class="header">
			<image src="https://s1.ax1x.com/2022/11/20/zMlUvn.jpg" mode=""></image>
			<text>用户注册</text>
		</view>
		<view class="img">
		</view>
		<view class="from">
			<view class="type">
			</view>
			<view class="input">
				<input type="password" v-model="pass" maxlength='11' placeholder="请输入密码">
				<input class="two" v-model="pass1" maxlength='6' type="password" placeholder="请再次输入密码">
			</view>
		</view>
		<view class="user">
			<view class="imgs" @click="show">
				<image v-if="isshow==true" src="https://s1.ax1x.com/2022/11/20/zMXyRA.png" mode=""></image>
			</view>
			我已阅读并同意《用户使用协议》和《隐私政策》
		</view>
		<view class="btu" @click="enrolment">
			确定提交
		</view>
	</view>
</template>

<script>
	import {
		regpass
	} from '@/pages/utils/api.js'
	export default {
		data() {
			return {
				mobile: "",
				pass: "",
				pass1: '',
				isshow: false
			}
		},
		onLoad(e) {
			console.log(e);
			this.mobile = e.data
		},
		methods: {
			async enrolment() {
				if (this.isshow == false) {
					uni.showToast({
						title: "请勾选协议",
						icon: 'error'
					})
				} else {
					let obj = {
						mobile: this.mobile,
						pass: this.pass
					}
					let res = await regpass(obj)
					console.log(res);
					if (res.errCode == 10000) {
						let data = res.data
						uni.setStorageSync("userInfo", res.data.member)
						uni.setStorageSync("token", res.data.token)
						uni.navigateTo({
							url: '/pages/mine/houuseList/houseList'
						})
					}
				}
			},
			show() {
				console.log(this.isshow);
				this.isshow = !this.isshow
			},
		}
	}
</script>

<style lang="less" scoped>
	.box {
		background-color: #f9f9f9;
		width: 100%;
		height: 100vh
	}

	.header {
		width: 100%;
		height: 100rpx;
		background-color: #49a1fa;
		display: flex;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 45rpx;
			margin-top: 35rpx;
		}

		text {
			color: #fff;
			margin-left: 230rpx;
			line-height: 100rpx;
		}
	}

	.img {
		width: 100%;
		height: 254rpx;
		background-color: #f4f5fa;
		background-image: url("https://s1.ax1x.com/2022/11/20/zMQIpj.png");
		background-size: 100%;
	}

	.from {
		width: 700rpx;
		height: 318rpx;
		background-color: #fff;
		border-radius: 15rpx;
		position: absolute;
		top: 204rpx;
		left: 25rpx;

		.type {
			width: 700rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.code {
				font-size: 36rpx;
				font-weight: 700;
				margin-left: 220rpx;
				margin-right: 100rpx;
			}

		}
	}

	.input input {
		width: 640rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 36rpx;
		font-size: 28rpx;

	}

	.pass {
		border-top: 1rpx solid #f2f2f2;
	}

	.two {
		width: 400rpx !important;
		border-bottom: none !important;
	}

	.get {
		font-size: 30rpx;
		color: #2f6ab4;
		position: absolute;
		top: 200rpx;
		right: 80rpx;
		font-size: 28rpx;
		cursor: pointer; //鼠标变小手
	}

	.user {
		margin-top: 250rpx;
		font-size: 21rpx;
		display: flex;
		line-height: 43rpx;

		.imgs {
			width: 43rpx;
			height: 43rpx;
			border: 1rpx solid #458df7;
			border-radius: 50%;
			margin-left: 50rpx;
			margin-right: 20rpx;

			image {
				width: 43rpx;
				height: 43rpx;
			}
		}
	}

	.btu {
		margin-top: 100rpx;
		width: 490rpx;
		height: 100rpx;
		background-color: #49a1fa;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		margin-left: 130rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.none {
		margin-top: 125rpx;
		text-align: center;
	}
</style>
